<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { useAppStore } from '@/store'
import { useLoadingBar  } from 'naive-ui'
import { ChevronForward,AlarmOutline } from '@vicons/ionicons5'
import { goto,time_format } from '@/utils/comm'
import { _home } from '@/api/api'
import { useRequest } from 'alova'

const store = useAppStore()
const loadingBar = useLoadingBar()
loadingBar.start()

const open_his= ()=> {
  let item = { path:"/history",}
  goto(item)
}

const open_detail= (item:any)=> {
  item.path = "/home/detail"
  goto(item)
}
 
const open_list= (type:any)=> {
  let item = {
      id:type,
      path:"/home/list",
      type:type
  }
  goto(item)
}

const data =  reactive({
  loading1: false,
  loading2: false,
  pge_comic:1,
  pge_video:1,
  pge_animes:1,
  cnt:12,
  hisList: [] as any[],
  comicList: [] as any[],
  animesList: [] as any[],
  videosList: [] as any[],
  num_his:3,
  num_pic:6,
  num_video:4
});


async function get_his_list() {
  const { onSuccess }  = useRequest(_home.getHisList({ pge: 1,cnt:10 }))
  onSuccess((res:any) => {
    data.hisList = res.data.list
  });
}

async function get_list(type:number) {
  const { onSuccess }  = useRequest(_home.getList({
    pge: 1,
    cnt: data.cnt,
    type: type
  }))
  onSuccess((res:any) => {
    if(type==1){data.comicList = res.data.list }  
    if(type==2){data.videosList = res.data.list }  
    if(type==3){ data.animesList = res.data.list } 
  });
}

const on_refresh = () => {
  get_his_list()
  get_list(1)
  get_list(2)
  get_list(3)
  setTimeout(() => {
    loadingBar.finish()
  }, 200)
}

const getwindow_size = async() => {
  if(window.innerWidth<400){
    data.num_his = 2
    data.num_pic = 3
    data.num_video = 2
  }
}

onMounted(() => {
  getwindow_size()
  on_refresh()
})
</script>

<template>
  <div class="page-home page_up"  :style="store.thems?.menu_left?'height:calc(100vh - 100px);':''">
    <n-scrollbar style="max-height: calc(100vh - 0px);padding: 10px;" trigger="none">
    <div class="banner" style="margin-top: 0;">
      <n-spin :show="data.loading1">
        <div  class="page_title xiaoshou ">
          <n-tag  round :bordered="false" size="large"  class="xiaoshou xnt" @click="open_his()">继续观看
          <template #avatar><n-avatar :style="{backgroundColor:store.thems?.primary}"><n-icon><AlarmOutline /></n-icon></n-avatar></template>
        </n-tag>
        </div>
        <n-carousel autoplay show-arrow :show-dots="false" :loop="false" dot-placement="top"  draggable :slides-per-view="data.num_his" :space-between="20" style="padding-top: 40px;">
          <n-carousel-item class="item" v-for="item in data.hisList" >
            <div class="card xiaoshou animated fadeIn " :style="'background-image:url('+item.cover+');'" v-if="item.show_type==2"   @click="open_detail(item)">
              <div class="card_box card_hover">
                <n-image lazy class="img" :src="item.cover" object-fit="cover" preview-disabled/>
                <div class="name">{{item.name}}</div>
              </div>
              <div class="last_time" :style="{backgroundColor:store.thems?.primary}">继续{{item.other}}</div>
            </div>
            <div class="card xiaoshou animated fadeIn" v-else   @click="open_detail(item)">
                <img lazy class="card_img" :src="item.cover" style="object-fit:cover" preview-disabled/>
                <div class="name2">{{item.name}}</div>
                <div class="last_time" :style="{backgroundColor:store.thems?.primary}">继续{{time_format(item.other)}}</div>
            </div>
        </n-carousel-item>
        </n-carousel>
      </n-spin>
    </div>
 

    <div class="banner">
      <n-spin :show="data.loading2">
        <div class="title" @click="open_list(1)"><div class="text">漫画<n-icon size="20"><ChevronForward /> </n-icon></div></div>
        <n-carousel show-arrow :show-dots="false" :loop="false" dot-placement="top"  draggable :slides-per-view="data.num_pic" :space-between="20" style="padding-top: 40px;">
          <n-carousel-item class="item" v-for="item in data.comicList"  >
            <div class="card xiaoshou animated fadeIn" style="aspect-ratio: 1/1.3;" @click="open_detail(item)">
              <img lazy class="card_img" :src="item.cover" preview-disabled  style="object-fit:cover"/>
            </div>
            <div class="item_title">{{item.name}}</div>
        </n-carousel-item>
        </n-carousel>
      </n-spin>
    </div>

    <div class="banner">
      <n-spin :show="data.loading2">
        <div class="title" @click="open_list(2)"><div class="text">视频<n-icon size="20"><ChevronForward /> </n-icon></div></div>
        <n-carousel show-arrow :show-dots="false" :loop="false" dot-placement="top"  draggable :slides-per-view="data.num_video" :space-between="20" style="padding-top: 40px;">
          <n-carousel-item class="item" v-for="item in data.videosList" >
            <div class="card xiaoshou animated fadeIn"  @click="open_detail(item)">
              <img lazy class="card_img" :src="item.cover" style="object-fit:cover"  preview-disabled/>
            </div>
            <div class="item_title">{{item.name}}</div>
        </n-carousel-item>
        </n-carousel>
      </n-spin>
    </div>

    <div class="banner">
      <n-spin :show="data.loading2">
        <div class="title" @click="open_list(3)"><div class="text">动画<n-icon size="20"><ChevronForward /> </n-icon></div></div>
        <n-carousel show-arrow :show-dots="false" :loop="false" dot-placement="top"  draggable :slides-per-view="data.num_video" :space-between="20" style="padding-top: 40px;">
          <n-carousel-item class="item" v-for="item in data.animesList" >
            <div class="card xiaoshou animated fadeIn"  @click="open_detail(item)">
              <img lazy class="card_img" :src="item.cover" style="object-fit:cover" preview-disabled/>
            </div>
            <div class="item_title">{{item.name}}</div>
        </n-carousel-item>
        </n-carousel>
      </n-spin>
    </div>

  </n-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.page-home{
  padding: 0px;
  height: calc(100vh - 52px);
  .banner{
    margin-top:20px;
    position: relative;
    :deep(.n-carousel__arrow-group) {
      top:0px !important;
      right: 0 !important;
    }
    .page_title{
      position: absolute;
      top:0px;
      left:0;
      font-size: 18px;
      cursor: pointer;
      z-index: 99;
      border-radius: 5px;
      transition: all 0.2s;
    }
    .title{
      position: absolute;
      top:-10px;
      left:0;
      font-size: 18px;
      cursor: pointer;
      z-index: 99;
      border-radius: 5px;
      padding: 5px;
      transition: all 0.2s;
      .text{
        display: flex;
        align-items: center;
        width: 80px;
        transition: all 0.2s;
      }
      &:hover{
        background-color: var(--hover1) !important;
        .text{
          transform: translateX(20px);
        }
      }
    }
    .item{
      width: 30%;
      border-radius: 5px;
    }
    .card {
      width: 100%;
      aspect-ratio: 1/0.6;
      object-fit: cover;
      border-radius: 5px;
      background-size: 100% auto;
      overflow: hidden;
      .name2{
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        background: linear-gradient(to bottom,rgb(0, 0, 0,0.5), rgb(0, 0, 0,0.8));
        height:30px;
        line-height:30px;
        overflow: hidden;
      }
      .last_time{
        position: absolute;
        top: 5px;
        right: 5px;
        padding: 2px 3px;
        text-align: center;
        overflow: hidden;
        border-radius: 5px;
        opacity: 0.8;
        color: #fff;
      }
      .card_img{
        width: 100%;height: 100%;border-radius: 5px;
        transition: all 0.4s;
        &:hover{
          transform: scale(1.1,1.1); 
        }
      }
    }
    .card_hover{
      &:hover{
          .img{
            transform: scale(1.02,1.02); 
          }
        }
    }
    .card_box{
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom,rgb(0, 0, 0,0.5), rgb(0, 0, 0,1));
      padding: 5px;
      display: flex;
      .img{
        height: 100%;aspect-ratio: 0.75/1;border-radius: 5px;
        transition: all 0.4s;
      }
      .name{
        color: #fff;width: auto;margin-left: 5px;font-size: 14px;display: flex;align-items: end;
      }
    }
    .item_title{
         width: 100%;
         height: 30px;
         line-height: 30px;
         overflow: hidden;
         text-align: center;
    }
  }
  :deep(.n-carousel__arrow) {
    background:transparent !important;
    border-radius: 4px;
    &:hover{
      background-color: var(--hover1) !important;
    }
  } 
 
} 
.light-mode { 
  .page-home{
    .banner{
      .title{
        &:hover{
          background-color: var(--light-hover-deep2) !important;
        }
      }
      .name2{
        background: linear-gradient(to bottom,rgb(255, 255, 255,0.5), rgb(255, 255, 255,0.8));
      }
      .card_box{
        background: linear-gradient(to bottom,rgb(255, 255, 255,0.5), rgb(255, 255, 255,0.8));
        .name{
          color: #000;
        }
      }
      .card_box2{
        background-color: rgb(255,255,255,0);
        .name{
          color: #000;
        }
      }
    }
    :deep(.n-carousel__arrow) {
      color: #000;
      &:hover{
        background-color: var(--light-hover-deep2) !important;
      }
    }
  }
}
</style>